<template>
  <a-popconfirm :disabled="disabled" v-if="isCheck" title="确定删除吗?" @confirm="() => handleClick()">
    <a-button
      class="theme--perfect-button"
      type="danger"
      :disabled="disabled"
      v-bind="useProps"
    >
      {{defaultProps.title}}
    </a-button>
  </a-popconfirm>
</template>

<script>
import ToolbarMixins from '../mixins/ToolbarMixins'
export default {
  name: 'VxeToolbarDel',
  mixins: [ToolbarMixins],
  data() {
    return {
      defaultProps: {
        title: '删除',
        icon: 'minus',
        ghost: true
      },
      isCheck: false,
      unwatch: ''
    }
  },
  computed: {
    useProps() {
      return Object.assign({}, this.defaultProps, this.toolbarProps)
    }
  },
  mounted() {
    this.unwatch = this.$watch(
      function() {
        // 处理函数都会被调用。
        // 这就像监听一个未被定义的计算属性
        const { $grid } = this.params
        const checkbox = $grid.getCheckboxRecords(true) || []
        return checkbox
      },
      function(newVal, oldVal) {
        // 将监听放在这里，计算属性中监听有bug
        this.isCheck = newVal.length > 0
      }
    )
  },
  beforeDestroy() {
    this.unwatch()
  }

}
</script>
<style>
.theme--perfect-button.ant-btn {
  /* padding: 0px 10px; */
}
</style>

